<script setup>
import tabuiation from "../../../../components/tabuiation.vue"
import forms from "../../../../components/form.vue"
import formssss from "../../../../components/forms.vue"
import { guanbanjidata, getTeacher, delAllguan, delAllTeacher } from "../../../../api/index.ts"
import { ref, reactive, inject, provide, onMounted, watch } from "vue"
import { userPiniaStore } from "@/stores"
const pinia = userPiniaStore()
//获取数据
onMounted(() => {
  mangedatas()
  reachers()
})

watch(() => pinia.refrechgaun, () => {
  mangedata.value = pinia.refrechgaun
})

watch(() => pinia.batchguanteacher, () => {
  teacher.value = pinia.batchguanteacher
})

watch(() => pinia.settinbanji, () => {
  mangedata.value = pinia.settinbanji
})
watch(() => pinia.setinTeacher, () => {
  teacher.value = pinia.setinTeacher
})

watch(() => pinia.delgyanbanji, () => {
  mangedata.value = pinia.delgyanbanji
})

watch(() => pinia.delgyanTeacher, () => {
  teacher.value = pinia.delgyanTeacher
})
//控制弹窗
const huan = ref(false);
//管理页面数据和弹框数据

const manage = ref([
  {
    id: 1,
    name: "班级管理",
  },
  {
    id: 2,
    name: "教师管理",
  },
]);
//管理页面班级管理数据
const mangedata = ref([])
const mangedatas = async () => {
  const res = await guanbanjidata()
  // console.log(res.data.data)
  mangedata.value = res.data.data
}
//管理页面下的教师管理数据和弹框数据
const teacher = ref([])
const reachers = async () => {
  const res = await getTeacher()
  //  console.log(res)
  teacher.value = res.data.data
}
const dianji = () => {
  huan.value = !huan.value
}
provide("dianji", dianji)
provide("huan", huan)

//点击新增弹框和数据
const flag = ref(false)
const addteacher = () => {
  flag.value = !flag.value
}
const add = () => {
  flag.value = !flag.value
}
provide("flag", flag)

const deldata = async () => {
  const res = await delAllguan(pinia.batchdelguan)
  alert(res.data.msg)
  console.log(res)
  mangedata.value = res.data.data
}

const delteacher = async () => {
  const res = await delAllTeacher(pinia.batchdelteacher)
  alert(res.data.msg)
  console.log(res)
  teacher.value = res.data.data
}
</script>

<template>
  <div>
    <div class="person-setting-page">
      <div>
        <el-tabs type="card" class="demo-tabs">
          <el-tab-pane :label="item.name" v-for="item in manage" :key="item.id">
            <div v-if="item.id == 1">
              <p class="banji">班级管理</p>
              <p class="new" @click="add">新增班级</p>
              <tabuiation :multidata="mangedata" :type="2"></tabuiation>
              <p class="del" @click="deldata">批量删除</p>
              <div>
                <forms :type="2"></forms>
              </div>
              <div>
                <formssss :type="6"></formssss>
              </div>
            </div>
            <div v-if="item.id == 2">
              <p class="jiaoshi">教师管理</p>
              <p class="new" @click="addteacher">新增教师</p>
              <tabuiation :multidata="teacher" :type="3"></tabuiation>
              <div class="cardtab">
                <p @click="delteacher">批量删除</p>
                <p>批量重置密码</p>
              </div>
              <div>
                <forms :type="3"></forms>
              </div>
              <div>
                <formssss :type="7"></formssss>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>

</template>

<style scoped>
.new {
  width: 100px;
  height: 30px;
  background-color: #409eff;
  color: #fff;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 10px;
}

span {
  cursor: pointer;
}

p {
  cursor: pointer;
}

.banji {
  font-size: 30px;
  margin-top: 20px;
}

.del {
  width: 100px;
  height: 30px;
  background-color: #409eff;
  color: #fff;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 499px;
}

.jiaoshi {
  font-size: 30px;
  margin-top: 20px;
}

.cardtab {
  display: flex;
  margin-left: 397px;
}

.cardtab p {
  width: 100px;
  height: 30px;
  background-color: #409eff;
  color: #fff;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>
